import { useState,useEffect } from "react";
function StateDemo(params) {

    const [title, setTitle] = useState("hello");
    const [user, setUser] = useState({name:"张三",age:"18"});
    const [list, setList] = useState([{id:1,title:"北京"},{id:2,title:"上海"},{id:3,title:"深圳"}]);
    const del=(ind)=>{
       setList(list.filter((item,index)=>ind!=index));
    }
    const add=()=>{
        let _list=[...list,{id:4,title:"广州"}];
        setList( _list);
    }
    const update = (txt) => {
        setUser({...user,name:"李四"});
        console.log("修改后",user);

    }
    useEffect(()=>{
        console.log("修改后",user);
     },[user])

    useEffect(()=>{
        //在这里调接口
        console.log("生命周期函数-挂载完成");

    },[])

    useEffect(()=>{
       return()=>{
        console.log("生命周期函数-销毁");
       }
    },[])

    useEffect(()=>{
 
        console.log("生命周期函数-挂载完成-更新完成");

    },[title])


    return <div>

        useState

        <div>
            {title}
            <div>
                <ul>
                    {
                        list.map((item,index)=>(
                            <li key={item.id}>{item.title}
                              <button onClick={()=>del(index)}>删除</button>
                            </li>
                        ))
                    }
                    <li></li>
                </ul>
            </div>
            <div id="box">
                {user.name}    {user.age}
            </div>
            <button onClick={() => setTitle("你好")}>修改title</button>
            <button onClick={() => update("你好")}>修改user</button>
            <button onClick={() => add()}>添加</button>
        </div>
    </div>

}

export default StateDemo;